<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this is vue3</title>
    <script src="../resources/vue.global.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: rgba(0, 100, 0, 0.7);
        }
        .titleBox{
            width: 100vw;
            height: 30px;
            display: flex;
            border-bottom: 1px solid rgba(200, 200, 200, 0.5);
        }
        .titleBox #pinnedImage{
            float: right;
            width: 50px;
            height: 100%;
            transition: all 0.5s;
        }
        .titleBox .dailog{
            width: 300px;
            height: 100%;
            -webkit-app-region: drag;
        }
        .titleBox img:nth-child(1){
            user-select: none;
            cursor: pointer;
        }
        .messageBox{
            width: 100vw;
            height: 84vh;
        }
        .messageBox .setValueBox{
            width: 100%;
            height: 70%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .messageBox .setValueBox .setValueBox1,
        .messageBox .setValueViteBox .setValueViteBox5{
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            /* display: flex;
            align-items: center;
            justify-content: center; */
        }
        .messageBox .setValueBox .setValueBox1 .showyuanma,
        .messageBox .setValueViteBox .setValueViteBox5 .showyuanma{
            position: relative;
            right: 0;
            float: right;
            top: 0;
            user-select: none;
            cursor: default;
        }
        #setValueId,
        #setValueIdVite{
            width: 20%;
            height: 100%;
        }
        #showyuanmaHTML,
        #showyuanmaVite{
            width: 100%;
            height: 75%;
            overflow-y: auto;
            overflow-x: auto;
        }
        #showyuanmaHTML div:nth-child(1),
        #showyuanmaHTML div:nth-child(2),
        #showyuanmaHTML div:nth-child(3),
        #showyuanmaHTML div:nth-child(4),
        #showyuanmaHTML div:nth-child(5),
        #showyuanmaHTML div:nth-child(6),
        #showyuanmaHTML div:nth-child(7),
        #showyuanmaHTML div:nth-child(8),
        #showyuanmaHTML div:nth-child(9),
        #showyuanmaHTML div:nth-child(10),
        #showyuanmaHTML div:nth-child(11),
        #showyuanmaHTML div:nth-child(12),
        #showyuanmaHTML div:nth-child(13),
        #showyuanmaHTML div:nth-child(14){
            width: 200%;
            height: 50%;
        }
        #showyuanmaVite div:nth-child(1),
        #showyuanmaVite div:nth-child(2),
        #showyuanmaVite div:nth-child(3),
        #showyuanmaVite div:nth-child(4),
        #showyuanmaVite div:nth-child(5),
        #showyuanmaVite div:nth-child(6),
        #showyuanmaVite div:nth-child(7),
        #showyuanmaVite div:nth-child(8),
        #showyuanmaVite div:nth-child(9),
        #showyuanmaVite div:nth-child(10),
        #showyuanmaVite div:nth-child(11),
        #showyuanmaVite div:nth-child(12),
        #showyuanmaVite div:nth-child(13),
        #showyuanmaVite div:nth-child(14){
            width: 200%;
            height: 50%;
        }

        .setValueViteBox{
            width: 100%;
            height: 50%;
        }
        body::-webkit-scrollbar{
            display: none;
        }
        div::-webkit-scrollbar{
            display: none;
        }
        .setValueViteBox1,
        .setValueViteBox2,
        .setValueViteBox3,
        .setValueViteBox4{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffffb3;
            border-radius: 10px;

        }
    </style>
</head>
<body>
    <div>
        <div class="titleBox">
            <img src="../images/reuturnWhit.svg" alt="" id="pinnedImage" />
            <img src="../images/logo/learn_vue_logo_white.svg" alt="">
            <div class="dailog"></div>
        </div>
        <div class="messageBox">
            <p style="color:#fff">首先我们先来个简单的案例</p>
            <div class="setValueBox">
                <div class="setValueBox1">
                    <div class="showyuanma">查看源码</div>
                    <div id="setValueId">
                        <p>{{dataValue}}</p>
                        <button @click="dataValue++">+1</button>
                    </div>
                    <div id="showyuanmaHTML" style="display: none;outline: none;">
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div>
                    </div>
                    <div class=""></div>
                </div>
            </div>
            <div class="setValueViteBox">
                <p style="color:#fff">接下来我们使用vite安装vue</p>
                <p style="color:#fff">注意使用vite,nodejs版本14.18+,16+</p>
                <p style="color:#fff">使用NPM:</p>
                <div class="setValueViteBox1"></div>
                <p style="color:#fff">初始化项目</p>
                <div class="setValueViteBox2">
                </div>
                <p style="color:#fff">使用Yarn:</p>
                <div class="setValueViteBox3">
                </div>
                <p style="color:#fff">初始化项目</p>
                <div class="setValueViteBox4">
                </div>
                <p style="color:#fff">再次来看这个+1的简单程序</p>
                <div class="setValueViteBox5">
                    <div class="showyuanma">查看源码</div>
                    <div id="setValueIdVite">
                        <p>{{dataValueVite}}</p>
                        <button @click="dataValueVite++">+1</button>
                    </div>
                    <div id="showyuanmaVite" style="display: none;outline: none;">
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="vueJs.js"></script>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        setup(){
            const dataValue = ref(0)
            return{
                dataValue
            }
        }
    }).mount('#setValueId')
    createApp({
        setup(){
            const dataValueVite = ref(0)
            return{
                dataValueVite
            }
        }
    }).mount('#setValueIdVite')
</script>
</html>